<template>
  <section id="function">
    <section class="btn-list" ref="btnList">
      <a-button @click="visibleAddAwards=true">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector_2"
                  d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_3" d="M8 5.33325V10.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="Vector_4" d="M5.3335 8H10.6668" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
        <p>添加一级</p>
      </a-button>
      <a-button @click="handleAddUser">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector_2"
                  d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_3" d="M8 5.33325V10.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="Vector_4" d="M5.3335 8H10.6668" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
        <p>添加二级</p>
      </a-button>
    </section>
    <section class="function-list list">
      <a-table :columns="columns" :data-source="data" :loading="isLoading"
               :pagination="false" :class="isEmpty ? '' :'empty'">
        <template #type="{record}">
          <a-tag color="blue" v-if="record.subfunctions">一级</a-tag>
          <a-tag color="#6777EF" v-else>二级</a-tag>
        </template>
        <template #action="{record}">
          <section class="operation" ref="operation">
            <span @click="handleEditFunctionData(record)">编辑</span>
            <span @click="handleDeteleAwardsData(record)">删除</span>
          </section>
        </template>
        <template #expandedRowRender="{ record }">

        </template>
      </a-table>
    </section>
  </section>

  <a-modal v-model:visible="visibleEditFunction" :footer="null" :getContainer="$refs.btnList" class="edit-model">
    <section class="edit-model-header">
      <h1>编辑功能管理</h1>
      <h2>Editing function management</h2>
    </section>
    <section class="edit-model-body">
      <a-select v-model:value="editFunction.type" placeholder="菜单类型">
        <a-select-option value="1">一级</a-select-option>
        <a-select-option value="2">二级</a-select-option>
      </a-select>
      <a-input v-model:value="editFunction.name" placeholder="菜单名"/>
      <a-input v-model:value="editFunction.url" placeholder="路由地址"/>
    </section>
    <section class="edit-model-footer">
      <a-button @click="visibleEditFunction=false">取消</a-button>
      <a-button @click="handleKeepCommunity" :loading="load">保存</a-button>
    </section>
  </a-modal>
</template>
<script>
import {defineComponent, getCurrentInstance, ref, onMounted, reactive} from 'vue'

export default defineComponent({
  name: "index",
  setup() {
    const {proxy} = getCurrentInstance()
    let data = ref([])
    let isLoading = ref(true)
    let isEmpty = ref(false)
    let load = ref(false)
    let visibleEditFunction = ref(false)
    let editFunction = reactive({
      url: '',
      name: '',
      type: ''
    })
    const columns = [
      {
        title: '菜单类型',
        dataIndex: 'name',
        key: 'name',
        slots: {
          customRender: 'type',
        },
      },
      {
        title: '菜单名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '路由地址',
        dataIndex: 'url',
        key: 'url',
      },
      {
        title: '操作',
        dataIndex: '',
        key: 'x',
        slots: {
          customRender: 'action',
        },
      },
    ];
    onMounted(() => {
      proxy.$request(proxy.$getRoute(15).route_method, proxy.$getRoute(15).route_url, {}).then(res => {
        console.log(res.data);
        data.value = res.data
        isLoading.value = false
        data.value.forEach(x => {
          if (x.subfunctions.length != 0) {
            x.children = x.subfunctions
          }
        })
        console.log(data.value);
        if (!data.value.length) isEmpty.value = true
      })
    })

    const handleEditFunctionData = (record) => {
      visibleEditFunction.value = true
      if (record.subfunctions.length = 0) {
        editFunction.type = '1'
      } else {
        editFunction.type = '2'
      }
    }
    return {
      data,
      isLoading,
      isEmpty,
      load,
      columns,
      visibleEditFunction,
      handleEditFunctionData,
      editFunction
    }
  }
})
</script>

<style lang="less">
@selectColor: #6777EF;
#function {
  .btn-list {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
  }

  .btn-list > button {
    display: flex;
    align-items: center;
    height: 52px;
    border-radius: 6px;
    border: none;
    background: #fff;
    box-shadow: none;
    gap: 4px;
  }

  .btn-list > button:hover p {
    color: @selectColor;
  }

  .btn-list > button:hover path {
    stroke: @selectColor;
  }

  .btn-list > button:nth-child(3) {
    width: 160px;
  }

  .btn-list > button p {
    margin: 0 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 20px;
    letter-spacing: 0.5px;
  }

  .list {
    margin-bottom: 50px;
    border-radius: 6px;
    overflow: hidden;
  }

  .list h1 {
    font-weight: bold;
    font-size: 24px;
  }

  .ant-table-thead > tr > th, .ant-table-header {
    font-size: 16px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 19px;
    background: #fff !important;
    text-align: center;
  }

  .ant-table {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    line-height: 19px;
    white-space: nowrap;
  }

  .ant-table-tbody > tr > td {
    padding: 15px 44px;
    border: none;
    cursor: pointer;
    position: relative;
    background: #fff;
    text-align: center;
  }

  .ant-table-tbody .ant-table-thead {
    display: none;
  }

  .ant-table-expanded-row td:last-child {
    padding: 15px 0;
  }

  .ant-table-expanded-row-level-1,
  .ant-table-expanded-row-level-2 {
    display: none;
  }

  .ant-table-row-level-1 {
    background: rgba(207, 207, 207, 0.1);
  }

  .ant-table-row-level-1 .ant-table-row-expand-icon-cell div {
    display: none;
  }

  .ant-table-row-level-1 td {
    background: none !important;
  }

  .ant-table-expanded-row td:last-child td:nth-child(1),
  .ant-table-expanded-row td:last-child td:nth-child(2) {
    width: 273px;
  }

  .ant-table-expanded-row td:last-child td:nth-child(3) {
    width: 376px;
  }

  .ant-table-expanded-row td:last-child td:nth-child(4) {
    width: 242px;
  }

  .empty .ant-empty {
    display: none !important;
  }

  .empty .ant-table-placeholder {
    height: 100px;
  }

  .operation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 58px;
  }

  .operation span {
    font-weight: bold;
    font-size: 14px;
  }

  .operation span:first-child {
    color: #6777EF;
  }

  .operation span:last-child {
    color: #EB5757;
  }

  tr.ant-table-expanded-row td > .ant-table-wrapper {
    margin: -16px 0 -17px;
  }

  .edit-model {
    width: 332px !important;
    min-height: 286px;
    box-sizing: border-box;
  }

  .edit-model .ant-modal-body > section {
    width: 100%;
  }

  .edit-model .edit-model-header h1 {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    line-height: 38px;
    text-align: center;
    margin-bottom: 2px;
  }

  .edit-model .edit-model-header h2 {
    font-size: 14px;
    font-weight: bold;
    color: #D9D9D9;
    line-height: 14px;
    text-transform: uppercase;
    text-align: center;
  }

  .edit-model .edit-model-body {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-content: space-around;
  }

  .edit-model .edit-model-body input {
    width: 268px;
    height: 40px;
    background: rgba(207, 207, 207, 0.1);
    border-radius: 6px 6px 6px 6px;
  }

  .edit-model .edit-model-body p {
    color: #E0E0E0;
  }

  .edit-model .edit-model-body > span {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
  }

  .ant-upload.ant-upload-drag {
    background: #262626;
    border: none;
  }

  .ant-upload.ant-upload-drag .ant-upload {
    padding: 0;
  }

  .edit-model .edit-model-footer {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
  }

  .edit-model .edit-model-footer button {
    height: 36px;
    padding: 7px 18px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 22px;
    border: none;
    border-radius: 4px;
  }

  .edit-model .edit-model-footer button:first-child {
    background: #F2F3F5;
    color: #000;
  }

  .edit-model .edit-model-footer button:last-child {
    color: #fff;
    background: #6777EF;
  }

  .edit-model .ant-select,
  .edit-model .ant-select-selector {
    width: 100%;
    height: 40px;
    border-radius: 6px 6px 6px 6px;
  }

  .edit-model .ant-select-selector {
    background: rgba(207, 207, 207, 0.1);
  }

  .edit-model .ant-select-selection-item {
    line-height: 40px;
  }
}
</style>
